<template>
  <view class="map-container">
    <!-- 地图区域 -->
    <view class="map-view">
      <map 
        id="myMap"
        :latitude="mapCenter.latitude" 
        :longitude="mapCenter.longitude"
        :markers="markers"
        :scale="mapScale"
        show-location="true"
        @markertap="onMarkerTap"
        @callouttap="onCalloutTap"
        @regionchange="onMapRegionChange"
      ></map>
      
      <!-- 悬浮搜索栏 -->
      <view class="floating-search">
        <view class="back-btn" @tap="goBack">
          <text class="iconfont icon-back">←</text>
        </view>
        <view class="search-wrapper" @tap="showSearchPanel">
          <view class="city-selector" @tap.stop="toggleCityPanel">
            {{ currentCity }} <text class="dropdown-icon">▼</text>
          </view>
          <view class="search-input">
            <text class="iconfont icon-search"></text>
            <text class="placeholder">搜索景点/酒店</text>
          </view>
        </view>
      </view>
      
      <!-- 筛选和功能按钮 -->
      <view class="floating-filters">
        <view class="filter-btn" @tap="toggleFilter('rating')">
          <text>景点: {{ ratingFilter }}</text>
        </view>
        <view class="filter-btn" @tap="toggleFilter('hotelType')">
          <text>酒店</text>
        </view>
      </view>
      
      <!-- 搜索结果信息卡 -->
      <view class="result-card" v-if="selectedMarker">
        <view class="result-count">景点{{ markers.length }}个</view>
        <view class="result-item">
          <text class="item-name">{{ selectedMarker.title }}</text>
          <text class="item-address">{{ selectedMarker.address }}</text>
        </view>
      </view>
      
      <!-- 定位按钮 -->
      <view class="location-btn" @tap="moveToMyLocation">
        <text class="location-icon">📍</text>
      </view>
    </view>
    
    <!-- 城市选择面板 -->
    <view class="city-panel" v-if="showCityPanel">
      <view class="panel-header">
        <text>当前位置</text>
        <view class="current-city">
          <text class="location-icon">📍</text>
          <text>{{ currentCity }}</text>
        </view>
      </view>
      
      <view class="recent-cities">
        <text class="section-title">最近访问</text>
        <view class="city-grid">
          <view class="city-item" v-for="(city, index) in recentCities" :key="index" @tap="selectCity(city)">
            {{ city }}
          </view>
        </view>
      </view>
      
      <view class="all-cities">
        <view class="letter-section" v-for="(section, letter) in cityList" :key="letter">
          <text class="letter">{{ letter }}</text>
          <view class="city-grid">
            <view class="city-item" v-for="(city, index) in section" :key="index" @tap="selectCity(city)">
              {{ city }}
            </view>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 信息提示 -->
    <view class="info-tip" v-if="showLocationTip">
      <text>我们自动定位到当前位置，若手动定位请点击右下角按钮。</text>
    </view>
  </view>
</template>

<script>
import { poiIcon } from '../../static/images/poi.js';

export default {
  data() {
    return {
      currentCity: '北京',
      mapCenter: {
        latitude: 39.9087,
        longitude: 116.3974
      },
      mapScale: 14,
      markers: [],
      selectedMarker: null,
      showCityPanel: false,
      showLocationTip: true,
      ratingFilter: '4分以上',
      recentCities: ['北京', '杭州', '深圳'],
      poiIcon: poiIcon,
      cityList: {
        'A': ['阿坝', '阿克苏', '阿拉尔', '阿拉善', '阿勒泰', '安康'],
        'B': ['白城', '白沙', '白山', '百色', '保定', '宝鸡', '包头', '北海'],
        'C': ['沧州', '长春', '长沙', '长治', '常德', '常州', '朝阳'],
        // 更多城市省略...
      },
      // 增加所有景点数据，与景点列表页面保持一致
      allScenicSpots: [
        {
          id: 1,
          name: '故宫博物院',
          latitude: 39.9163,
          longitude: 116.3972,
          address: '北京市东城区景山前街4号',
          score: 4.9,
          image: 'http://114.55.56.174:19000/shzy/故宫.jpg',
          distance: 2.5,
          tags: ['5A景区', '博物馆', '文化古迹'],
          price: 60
        },
        {
          id: 2,
          name: '颐和园',
          latitude: 39.9991,
          longitude: 116.2754,
          address: '北京市海淀区新建宫门路19号',
          score: 4.9,
          image: 'http://114.55.56.174:19000/shzy/颐和园1.png',
          distance: 8.3,
          tags: ['5A景区', '世界遗产', '园林'],
          price: 40
        },
        {
          id: 3,
          name: '八达岭长城',
          latitude: 40.3599,
          longitude: 116.0204,
          address: '北京市延庆区八达岭长城景区',
          score: 4.8,
          image: 'http://114.55.56.174:19000/shzy/八达岭长城.jpg',
          distance: 15.8,
          tags: ['5A景区', '世界遗产', '打卡圣地'],
          price: 40
        },
        {
          id: 4,
          name: '大唐不夜城',
          latitude: 34.2121,
          longitude: 108.9398,
          address: '陕西省西安市雁塔区大唐不夜城',
          score: 4.7,
          image: 'http://114.55.56.174:19000/shzy/大唐不夜城.png',
          distance: 25.0,
          tags: ['5A景区', '历史遗址', '夜景'],
          price: 60
        },
        {
          id: 5,
          name: '天坛公园',
          latitude: 39.8822,
          longitude: 116.4107,
          address: '北京市东城区天坛路天坛公园',
          score: 4.8,
          image: 'http://114.55.56.174:19000/shzy/天坛公园.png',
          distance: 3.0,
          tags: ['5A景区', '世界遗产', '文化古迹'],
          price: 35
        },
        {
          id: 6,
          name: '鸟巢',
          latitude: 39.9902,
          longitude: 116.3964,
          address: '北京市朝阳区国家体育场南路1号',
          score: 4.7,
          image: 'http://114.55.56.174:19000/shzy/鸟巢.png',
          distance: 5.5,
          tags: ['5A景区', '奥林匹克遗址', '现代建筑'],
          price: 50
        },
        {
          id: 7,
          name: '圆明园',
          latitude: 40.0080,
          longitude: 116.2988,
          address: '北京市海淀区清华西路28号',
          score: 4.6,
          image: 'http://114.55.56.174:19000/shzy/圆明园.png',
          distance: 12.3,
          tags: ['世界遗产', '园林', '历史遗址'],
          price: 40
        },
        {
          id: 8,
          name: '北海公园',
          latitude: 39.9287,
          longitude: 116.3890,
          address: '北京市西城区文津街1号',
          score: 4.7,
          image: 'http://114.55.56.174:19000/shzy/北海公园.png',
          distance: 3.7,
          tags: ['5A景区', '皇家园林', '文化古迹'],
          price: 30
        },
        {
          id: 9,
          name: '大钟寺',
          latitude: 39.9671,
          longitude: 116.3503,
          address: '北京市海淀区北三环西路',
          score: 4.6,
          image: 'http://114.55.56.174:19000/shzy/大钟寺.png',
          distance: 6.0,
          tags: ['历史遗址', '佛教文化', '宗教场所'],
          price: 25
        }
      ],
      scenicSpots: [
        {
          id: 1,
          name: '故宫博物院',
          latitude: 39.9163,
          longitude: 116.3972,
          address: '北京市东城区景山前街4号',
          score: 4.9
        },
        {
          id: 2,
          name: '北京市档案馆',
          latitude: 39.9087,
          longitude: 116.3674,
          address: '北京市西城区德胜门西大街15号',
          score: 4.6
        },
        {
          id: 3,
          name: '天坛公园',
          latitude: 39.8822,
          longitude: 116.4107,
          address: '北京市东城区天坛路天坛公园',
          score: 4.8
        }
      ]
    }
  },
  onLoad(options) {
    // 处理从搜索页传来的关键词
    if (options && options.keyword) {
      const keyword = decodeURIComponent(options.keyword);
      this.searchScenicSpots(keyword);
    } else if (options && options.spotId) {
      // 处理从景点列表页跳转过来，显示指定景点
      this.showSpecificSpot(options.spotId);
    } else {
      this.initLocationAndMarkers();
    }
    
    // 3秒后隐藏定位提示
    setTimeout(() => {
      this.showLocationTip = false;
    }, 3000);
    
    // 监听城市变更事件
    uni.$on('changeCity', this.handleCityChange);
    
    // 监听搜索关键词事件
    uni.$on('searchKeyword', this.handleSearchKeyword);
  },
  onUnload() {
    // 移除事件监听
    uni.$off('changeCity', this.handleCityChange);
    uni.$off('searchKeyword', this.handleSearchKeyword);
  },
  methods: {
    // 处理城市变更
    handleCityChange(data) {
      if (data && data.city) {
        this.currentCity = data.city;
        // 更新地图中心点到这个城市
        this.updateCityCenter(data.city);
      }
    },
    
    // 更新城市中心点
    updateCityCenter(cityName) {
      // 这里应该调用地图API获取城市的中心坐标
      // 以下是模拟数据
      const cityCenters = {
        '北京': { latitude: 39.9087, longitude: 116.3974 },
        '上海': { latitude: 31.2304, longitude: 121.4737 },
        '广州': { latitude: 23.1291, longitude: 113.2644 },
        '深圳': { latitude: 22.5431, longitude: 114.0579 }
      };
      
      if (cityCenters[cityName]) {
        this.mapCenter = cityCenters[cityName];
        this.mapScale = 12; // 设置缩放级别
        
        // 加载该城市的景点
        this.loadCityScenicSpots(cityName);
      }
    },
    
    // 加载城市景点
    loadCityScenicSpots(cityName) {
      // 这里应该根据城市名称从API获取景点数据
      // 以下是模拟数据
      if (cityName === '北京') {
        this.scenicSpots = [
          {
            id: 1,
            name: '故宫博物院',
            latitude: 39.9163,
            longitude: 116.3972,
            address: '北京市东城区景山前街4号',
            score: 4.9
          },
          {
            id: 2,
            name: '北京市档案馆',
            latitude: 39.9087,
            longitude: 116.3674,
            address: '北京市西城区德胜门西大街15号',
            score: 4.6
          },
          {
            id: 3,
            name: '天坛公园',
            latitude: 39.8822,
            longitude: 116.4107,
            address: '北京市东城区天坛路天坛公园',
            score: 4.8
          }
        ];
      } else if (cityName === '上海') {
        this.scenicSpots = [
          {
            id: 101,
            name: '外滩',
            latitude: 31.2304,
            longitude: 121.4900,
            address: '上海市黄浦区中山东一路',
            score: 4.8
          },
          {
            id: 102,
            name: '上海迪士尼乐园',
            latitude: 31.1440,
            longitude: 121.6570,
            address: '上海市浦东新区川沙新镇',
            score: 4.7
          }
        ];
      }
      
      // 加载标记点
      this.loadScenicSpots();
    },
    
    // 初始化定位和标记点
    initLocationAndMarkers() {
      // 先尝试通过API获取用户位置
      try {
        uni.getLocation({
          type: 'gcj02',
          isHighAccuracy: true, // 开启高精度定位
          success: (res) => {
            console.log('定位成功', res);
            this.mapCenter.latitude = res.latitude;
            this.mapCenter.longitude = res.longitude;
            
            // 根据坐标获取城市名称
            this.getCityNameByLocation(res.latitude, res.longitude);
            
            // 加载景点
            this.loadScenicSpots();
          },
          fail: (err) => {
            console.error('定位API失败，使用模拟坐标', err);
            // 使用模拟坐标 (北京市中心)
            this.useSimulatedLocation();
          },
          complete: () => {
            console.log('定位操作完成');
          }
        });
      } catch (e) {
        console.error('定位操作异常', e);
        // 定位异常时使用模拟坐标
        this.useSimulatedLocation();
      }
    },
    
    // 使用模拟位置坐标
    useSimulatedLocation() {
      // 北京市中心坐标
      this.mapCenter = {
        latitude: 39.9087,
        longitude: 116.3974
      };
      this.currentCity = '北京';
      
      // 加载景点
      this.loadScenicSpots();
      
      // 给用户提示
      uni.showToast({
        title: '使用默认位置：北京',
        icon: 'none',
        duration: 2000
      });
    },
    
    // 根据坐标获取城市名称
    getCityNameByLocation(latitude, longitude) {
      // 简化实现：根据经纬度范围粗略判断城市
      // 北京的经纬度范围大致是：
      // 纬度: 39.4~41.6，经度: 115.7~117.4
      if (latitude >= 39.4 && latitude <= 41.6 && longitude >= 115.7 && longitude <= 117.4) {
        this.currentCity = '北京';
        return;
      }

      // 上海的经纬度范围大致是：
      // 纬度: 30.7~31.5，经度: 120.9~122.0
      if (latitude >= 30.7 && latitude <= 31.5 && longitude >= 120.9 && longitude <= 122.0) {
        this.currentCity = '上海';
        return;
      }
      
      // 深圳的经纬度范围大致是：
      // 纬度: 22.4~22.8，经度: 113.8~114.6
      if (latitude >= 22.4 && latitude <= 22.8 && longitude >= 113.8 && longitude <= 114.6) {
        this.currentCity = '深圳';
        return;
      }
      
      // 如果无法判断，保持当前城市不变
      console.log('无法根据经纬度确定城市，使用默认城市');
    },
    
    // 根据关键词搜索景点
    searchScenicSpots(keyword) {
      console.log('搜索景点:', keyword);
      
      if (!keyword) {
        uni.showToast({
          title: '请输入搜索关键词',
          icon: 'none'
        });
        return;
      }
      
      // 从所有景点数据中搜索
      const results = [];
      
      // 1. 首先从allScenicSpots搜索
      this.allScenicSpots.forEach(spot => {
        if (spot.name.includes(keyword) || 
            (spot.address && spot.address.includes(keyword)) ||
            (spot.tags && spot.tags.some(tag => tag.includes(keyword)))) {
          // 避免重复添加
          if (!results.some(item => item.id === spot.id)) {
            results.push(spot);
          }
        }
      });
      
      // 2. 然后从原来的scenicSpots搜索
      this.scenicSpots.forEach(spot => {
        if ((spot.name.includes(keyword) || spot.address.includes(keyword)) && 
            !results.some(item => item.id === spot.id)) {
          results.push(spot);
        }
      });
      
      // 3. 如果没有结果，添加一些额外的搜索结果
      if (results.length === 0) {
        // 模拟一些额外的搜索结果
        const additionalSpots = [
          {
            id: 101,
            name: '北京动物园',
            latitude: 39.9406,
            longitude: 116.3331,
            address: '北京市西城区西直门外大街137号',
            score: 4.6
          },
          {
            id: 102,
            name: '北京植物园',
            latitude: 39.9957,
            longitude: 116.2064,
            address: '北京市海淀区香山南路',
            score: 4.7
          },
          {
            id: 103,
            name: '北京欢乐谷',
            latitude: 39.8737,
            longitude: 116.4888,
            address: '北京市朝阳区东四环小武基东路',
            score: 4.8
          }
        ];
        
        // 从额外结果中筛选
        additionalSpots.forEach(spot => {
          if (spot.name.includes(keyword) || spot.address.includes(keyword)) {
            results.push(spot);
          }
        });
      }
      
      if (results.length > 0) {
        // 找到结果，更新标记点
        this.markers = results.map(spot => {
          return {
            id: spot.id,
            latitude: spot.latitude,
            longitude: spot.longitude,
            title: spot.name,
            address: spot.address,
            iconPath: this.poiIcon,
            width: 32,
            height: 40,
            anchor: {x: 0.5, y: 1},
            callout: {
              content: `${spot.name}${spot.price ? '\n¥'+spot.price+'起' : ''}`,
              color: '#333333',
              fontSize: 14,
              borderRadius: 4,
              bgColor: '#FFFFFF',
              padding: 8,
              display: 'ALWAYS' // 始终显示气泡
            }
          };
        });
        
        // 将地图中心点设置为第一个结果的位置
        this.mapCenter.latitude = results[0].latitude;
        this.mapCenter.longitude = results[0].longitude;
        this.mapScale = 15; // 放大一些
        
        // 选中第一个结果
        this.selectedMarker = {
          id: results[0].id,
          title: results[0].name,
          address: results[0].address,
          price: results[0].price
        };
        
        uni.showToast({
          title: `找到${results.length}个结果`,
          icon: 'success'
        });
      } else {
        // 未找到结果
        uni.showToast({
          title: `未找到与"${keyword}"相关的景点`,
          icon: 'none'
        });
        
        // 如果搜索无结果，不改变当前地图
      }
    },
    
    // 展示特定景点
    showSpecificSpot(spotId) {
      // 将ID转为数字
      const id = parseInt(spotId);
      // 从所有景点中查找
      let spot = this.allScenicSpots.find(item => item.id === id);
      
      // 如果在allScenicSpots中没找到，再找scenicSpots
      if (!spot) {
        spot = this.scenicSpots.find(item => item.id === id);
      }
      
      if (spot) {
        // 找到了景点
        this.mapCenter.latitude = spot.latitude;
        this.mapCenter.longitude = spot.longitude;
        this.mapScale = 16; // 放大一些
        
        // 创建标记
        this.markers = [{
          id: spot.id,
          latitude: spot.latitude,
          longitude: spot.longitude,
          title: spot.name,
          address: spot.address,
          iconPath: this.poiIcon,
          width: 32,
          height: 40,
          anchor: {x: 0.5, y: 1},
          callout: {
            content: `${spot.name}${spot.price ? '\n¥'+spot.price+'起' : ''}`,
            color: '#333333',
            fontSize: 14,
            borderRadius: 4,
            bgColor: '#FFFFFF',
            padding: 8,
            display: 'ALWAYS'
          }
        }];
        
        // 选中该景点
        this.selectedMarker = {
          id: spot.id,
          title: spot.name,
          address: spot.address,
          price: spot.price
        };
        
        // 根据景点位置设定城市
        this.getCityNameByLocation(spot.latitude, spot.longitude);
      } else {
        // 如果没找到指定景点，使用默认位置
        this.initLocationAndMarkers();
        uni.showToast({
          title: '未找到指定景点',
          icon: 'none'
        });
      }
    },
    
    // 加载景点数据并设置标记点
    loadScenicSpots() {
      // 获取当前城市的景点
      const citySpots = this.getCurrentCitySpots();
      
      // 如果找到了城市景点，使用这些景点
      if (citySpots.length > 0) {
        this.markers = citySpots.map(spot => this.createMarker(spot));
      } else {
        // 否则使用默认的scenicSpots
        this.markers = this.scenicSpots.map(spot => this.createMarker(spot));
      }
    },
    
    // 获取当前城市的景点
    getCurrentCitySpots() {
      // 根据当前城市筛选景点
      return this.allScenicSpots.filter(spot => {
        if (!spot.address) return false;
        
        // 匹配城市名
        if (this.currentCity === '北京') {
          return spot.address.includes('北京');
        } else if (this.currentCity === '上海') {
          return spot.address.includes('上海');
        } else if (this.currentCity === '西安') {
          return spot.address.includes('西安');
        } else if (this.currentCity === '深圳') {
          return spot.address.includes('深圳');
        }
        
        return false;
      });
    },
    
    // 创建地图标记
    createMarker(spot) {
      return {
        id: spot.id,
        latitude: spot.latitude,
        longitude: spot.longitude,
        title: spot.name,
        address: spot.address,
        iconPath: this.poiIcon,
        width: 32,
        height: 40,
        anchor: {x: 0.5, y: 1},
        callout: {
          content: `${spot.name}${spot.price ? '\n¥'+spot.price+'起' : ''}`,
          color: '#333333',
          fontSize: 14,
          borderRadius: 4,
          bgColor: '#FFFFFF',
          padding: 8,
          display: 'BYCLICK'
        }
      };
    },
    
    // 返回上一页
    goBack() {
      uni.navigateBack();
    },
    
    // 显示搜索面板
    showSearchPanel() {
      try {
        console.log('准备跳转到搜索页面');
        // 保存当前页面状态到全局变量
        getApp().globalData = getApp().globalData || {};
        getApp().globalData.mapStatus = {
          latitude: this.mapCenter.latitude,
          longitude: this.mapCenter.longitude,
          scale: this.mapScale,
          markers: this.markers
        };
        
        // 先尝试使用相对路径
        uni.navigateTo({
          url: 'search',
          fail: (err1) => {
            console.error('使用相对路径跳转失败', err1);
            
            // 再尝试使用绝对路径
            uni.navigateTo({
              url: '/pages/guide/search',
              fail: (err2) => {
                console.error('使用绝对路径跳转失败', err2);
                
                // 最后尝试使用redirectTo
                uni.redirectTo({
                  url: '/pages/guide/search',
                  fail: (err3) => {
                    console.error('所有跳转方式均失败', err3);
                    
                    // 创建简易的搜索弹窗
                    uni.showModal({
                      title: '搜索',
                      editable: true,
                      placeholderText: '请输入景点名称',
                      success: (res) => {
                        if (res.confirm && res.content) {
                          console.log('用户输入搜索关键词:', res.content);
                          this.searchScenicSpots(res.content);
                        }
                      }
                    });
                  }
                });
              }
            });
          },
          success: () => {
            console.log('搜索页面跳转成功');
          }
        });
      } catch (e) {
        console.error('搜索跳转异常', e);
        uni.showToast({
          title: '搜索功能发生错误',
          icon: 'none'
        });
      }
    },
    
    // 切换筛选器
    toggleFilter(type) {
      if (type === 'rating') {
        const ratings = ['不限', '4分以上', '4.5分以上', '5分'];
        const currentIndex = ratings.indexOf(this.ratingFilter);
        const nextIndex = (currentIndex + 1) % ratings.length;
        this.ratingFilter = ratings[nextIndex];
        
        // 根据评分筛选景点
        this.filterScenicSpotsByRating();
      } else {
        uni.showToast({
          title: '酒店筛选功能开发中',
          icon: 'none'
        });
      }
    },
    
    // 根据评分筛选景点
    filterScenicSpotsByRating() {
      if (this.ratingFilter === '不限') {
        this.loadScenicSpots();
        return;
      }
      
      const minScore = parseFloat(this.ratingFilter.split('分')[0]);
      const filteredSpots = this.scenicSpots.filter(spot => {
        return spot.score >= minScore;
      });
      
      this.markers = filteredSpots.map(spot => {
        return {
          id: spot.id,
          latitude: spot.latitude,
          longitude: spot.longitude,
          title: spot.name,
          address: spot.address,
          iconPath: this.poiIcon,
          width: 32,
          height: 40,
          anchor: {x: 0.5, y: 1},
          callout: {
            content: spot.name,
            color: '#333333',
            fontSize: 14,
            borderRadius: 4,
            bgColor: '#FFFFFF',
            padding: 8,
            display: 'BYCLICK'
          }
        };
      });
    },
    
    // 标记点点击事件
    onMarkerTap(e) {
      const markerId = e.markerId;
      const marker = this.markers.find(item => item.id === markerId);
      if (marker) {
        this.selectedMarker = marker;
        
        // 将地图中心点移动到标记点位置
        this.mapCenter.latitude = marker.latitude;
        this.mapCenter.longitude = marker.longitude;
      }
    },
    
    // 气泡点击事件
    onCalloutTap(e) {
      const markerId = e.markerId;
      const spot = this.scenicSpots.find(item => item.id === markerId);
      if (spot) {
        uni.navigateTo({
          url: `/pages/scenic/detail?id=${spot.id}`
        });
      }
    },
    
    // 地图区域变化事件
    onMapRegionChange(e) {
      // 可以根据地图区域变化调整显示的景点
      console.log('地图区域变化', e);
    },
    
    // 移动到我的位置
    moveToMyLocation() {
      uni.showLoading({
        title: '定位中...'
      });
      
      try {
        uni.getLocation({
          type: 'gcj02',
          isHighAccuracy: true,
          success: (res) => {
            console.log('移动到我的位置成功', res);
            this.mapCenter.latitude = res.latitude;
            this.mapCenter.longitude = res.longitude;
            this.mapScale = 16; // 放大到街道级别
            
            // 获取城市名称
            this.getCityNameByLocation(res.latitude, res.longitude);
            
            uni.hideLoading();
            uni.showToast({
              title: '定位成功',
              icon: 'success'
            });
          },
          fail: (err) => {
            console.error('移动到我的位置失败', err);
            uni.hideLoading();
            
            // 使用模拟位置
            this.moveToSimulatedLocation();
          }
        });
      } catch (e) {
        console.error('定位功能异常', e);
        uni.hideLoading();
        this.moveToSimulatedLocation();
      }
    },
    
    // 移动到模拟位置
    moveToSimulatedLocation() {
      // 北京天安门附近
      this.mapCenter = {
        latitude: 39.9087,  
        longitude: 116.3974
      };
      this.mapScale = 16;
      this.currentCity = '北京';
      
      uni.showToast({
        title: '使用默认位置：北京',
        icon: 'none'
      });
    },
    
    // 切换城市选择面板
    toggleCityPanel() {
      this.showCityPanel = !this.showCityPanel;
    },
    
    // 选择城市
    selectCity(city) {
      this.currentCity = city;
      this.showCityPanel = false;
      
      // 保存到最近使用的城市
      if (!this.recentCities.includes(city)) {
        this.recentCities.unshift(city);
        if (this.recentCities.length > 6) {
          this.recentCities.pop();
        }
      }
      
      // 更新地图中心点到所选城市
      this.updateCityCenter(city);
      
      uni.showToast({
        title: `已切换到${city}`,
        icon: 'none'
      });
    },
    
    // 处理搜索关键词
    handleSearchKeyword(data) {
      if (data && data.keyword) {
        console.log('接收到搜索关键词', data.keyword);
        this.searchScenicSpots(data.keyword);
      }
    }
  }
}
</script>

<style lang="scss">
.map-container {
  position: relative;
  width: 100%;
  height: 100vh;
}

.header {
  position: relative;
  display: flex;
  align-items: center;
  padding: 20rpx;
  background-color: #fff;
  box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.1);
  z-index: 10;
  
  .back-btn {
    width: 60rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    
    .iconfont {
      font-size: 36rpx;
      color: #333;
    }
  }
  
  .city-selector {
    margin: 0 20rpx;
    font-size: 28rpx;
    color: #333;
    font-weight: bold;
    display: flex;
    align-items: center;
    
    .dropdown-icon {
      font-size: 20rpx;
      margin-left: 8rpx;
      color: #999;
    }
  }
  
  .search-bar {
    flex: 1;
    height: 64rpx;
    background: #f5f5f5;
    border-radius: 32rpx;
    display: flex;
    align-items: center;
    padding: 0 20rpx;
    
    .iconfont {
      font-size: 28rpx;
      color: #999;
      margin-right: 10rpx;
    }
    
    .placeholder {
      font-size: 28rpx;
      color: #999;
    }
  }
  
  .search-btn {
    margin-left: 20rpx;
    font-size: 28rpx;
    color: #4080ff;
  }
}

.filter-bar {
  display: flex;
  padding: 20rpx;
  background: #fff;
  border-bottom: 1rpx solid #eee;
  z-index: 9;
  
  .filter-item {
    display: flex;
    align-items: center;
    margin-right: 30rpx;
    font-size: 26rpx;
    color: #333;
    
    .icon-arrow {
      font-size: 20rpx;
      color: #999;
      margin-left: 8rpx;
    }
  }
}

.map-view {
  width: 100%;
  height: calc(100vh - 200rpx);
  position: relative;
  
  map {
    width: 100%;
    height: 100%;
  }
  
  .floating-search {
    position: absolute;
    top: 40rpx;
    left: 20rpx;
    right: 20rpx;
    padding: 10rpx 20rpx;
    background: rgba(255,255,255,0.9);
    z-index: 10;
    border-radius: 40rpx;
    display: flex;
    align-items: center;
    box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.1);
    
    .back-btn {
      width: 60rpx;
      height: 60rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      
      .iconfont {
        font-size: 36rpx;
        color: #333;
      }
    }
    
    .search-wrapper {
      flex: 1;
      display: flex;
      align-items: center;
      
      .city-selector {
        margin-right: 20rpx;
        font-size: 28rpx;
        color: #333;
        font-weight: bold;
        display: flex;
        align-items: center;
        
        .dropdown-icon {
          font-size: 20rpx;
          margin-left: 8rpx;
          color: #999;
        }
      }
      
      .search-input {
        flex: 1;
        height: 64rpx;
        background: #f5f5f5;
        border-radius: 32rpx;
        display: flex;
        align-items: center;
        padding: 0 20rpx;
        
        .iconfont {
          font-size: 28rpx;
          color: #999;
          margin-right: 10rpx;
        }
        
        .placeholder {
          font-size: 28rpx;
          color: #999;
        }
      }
    }
  }
  
  .floating-filters {
    position: absolute;
    top: 130rpx;
    left: 20rpx;
    right: 20rpx;
    display: flex;
    background: rgba(255,255,255,0.9);
    border-radius: 30rpx;
    padding: 10rpx;
    box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.1);
    
    .filter-btn {
      flex: 1;
      display: flex;
      justify-content: center;
      font-size: 26rpx;
      color: #333;
      padding: 10rpx 0;
    }
  }
  
  .result-card {
    position: absolute;
    bottom: 100rpx;
    left: 20rpx;
    right: 20rpx;
    background: #fff;
    border-radius: 12rpx;
    padding: 20rpx;
    box-shadow: 0 2rpx 20rpx rgba(0,0,0,0.1);
    
    .result-count {
      font-size: 24rpx;
      color: #999;
      margin-bottom: 16rpx;
    }
    
    .result-item {
      display: flex;
      flex-direction: column;
      
      .item-name {
        font-size: 30rpx;
        font-weight: bold;
        color: #333;
        margin-bottom: 8rpx;
      }
      
      .item-address {
        font-size: 24rpx;
        color: #666;
      }
    }
  }
  
  .location-btn {
    position: absolute;
    bottom: 40rpx;
    right: 40rpx;
    width: 80rpx;
    height: 80rpx;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.1);
    
    .location-icon {
      font-size: 36rpx;
      color: #4080ff;
    }
  }
}

.city-panel {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  z-index: 100;
  padding: 30rpx;
  overflow-y: auto;
  
  .panel-header {
    margin-bottom: 30rpx;
    
    text {
      font-size: 28rpx;
      color: #999;
    }
    
    .current-city {
      display: flex;
      align-items: center;
      margin-top: 20rpx;
      padding: 20rpx;
      background: #f5f5f5;
      border-radius: 8rpx;
      
      .location-icon {
        font-size: 28rpx;
        margin-right: 10rpx;
      }
      
      text {
        font-size: 30rpx;
        color: #333;
      }
    }
  }
  
  .recent-cities {
    margin-bottom: 30rpx;
    
    .section-title {
      font-size: 28rpx;
      color: #999;
      margin-bottom: 20rpx;
    }
  }
  
  .city-grid {
    display: flex;
    flex-wrap: wrap;
    
    .city-item {
      width: 180rpx;
      height: 80rpx;
      background: #f5f5f5;
      border-radius: 8rpx;
      margin-right: 15rpx;
      margin-bottom: 15rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28rpx;
      color: #333;
    }
  }
  
  .letter-section {
    margin-bottom: 20rpx;
    
    .letter {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 20rpx;
    }
  }
}

.info-tip {
  position: absolute;
  bottom: 200rpx;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.7);
  color: #fff;
  padding: 20rpx 30rpx;
  border-radius: 30rpx;
  font-size: 24rpx;
  max-width: 80%;
  text-align: center;
  z-index: 8;
}
</style> 